<template>
    <div class="cart container">
        <div class="nav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>购物车</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="cartList">
            <div class="top">
                <p class="all">
                    <el-checkbox v-model="checkedAll">全选</el-checkbox>
                </p>
                <p class="message lh">商品信息</p>
                <p class="u-price lh">单价</p>
                <p class="num lh">数量</p>
                <p class="subtotall lh">小计</p>
                <p class="operation lh">操作</p>
            </div>
            <!-- 空购物车 -->
            <div class="content" v-show="boxBoolean">
                <div class="empty">
                    <img width="180" height="120" src="../../../public/cart.png" alt="">
                    <p class="none">购物车内暂时没有商品</p>
                    <el-button type="success" class="btn" @click="tabHome">继续逛逛</el-button>
                </div>
            </div>
            <!-- 商品购物车 -->
            <div class="shopping" v-show="boxBoolean2">
                <template v-for="(item,index) in shopList">
                    <div class="shop-box" :v-key="index">
                        <div class="sel">
                            <el-checkbox @change="setSelect(item.selected,index)" v-model="item.selected"></el-checkbox>
                        </div>
                        <div class="shop">
                            <img class="max" :src="item.picture" alt="">
                            <div class="txt">
                                <p ref="title">{{item.name}}</p>
                            </div>
                        </div>
                        <div class="price">￥<span ref="price">{{item.price}}</span></div>
                        <div class="num">
                            <p>
                                <span class="subtract" @click="subtract(index)">-</span>
                                <span class="quantity" ref="num">{{item.count}}</span>
                                <span class="add" @click="add(index)">+</span>
                            </p>
                            
                        </div>
                        <div class="xiao">
                            ￥
                            <span ref="xiaoji">{{Number(item.price*item.count).toFixed(1)}}</span>
                        </div>
                        <div class="remove" @click="remove(index)">删除</div>
                    </div>
                </template>
            </div>
        </div>
        <!-- 购物车操作 -->
        <div class="commodity_operation">
            <div class="left">
                <p class="all">
                    <el-checkbox v-model="checkedAll">全选</el-checkbox>
                </p>
                <p class="remove">删除商品</p>
                <p class="collect">移入收藏夹</p>
                <p class="eliminate">清空失效商品</p>
            </div>
            <div class="right">
                <p>
                    共<span>0</span>件商品，已选择<span>0</span>件，商品合计：￥<span ref="zong">0</span>
                    <el-button type="success" class="btn">下单结算</el-button>
                </p>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <GuessView></GuessView>
    </div>
</template>

<script>
import GuessView from "@/components/guess/GuessView.vue"
export default{
    name:"cart",
    data(){
        return{
            // 全选按钮状态
            checkedAll:false,
            // 空购物车显示与隐藏
            boxBoolean:true,
            // 购物车商品列表
            shopList:null,
            // 商品购物车显示与隐藏
            boxBoolean2:false,
            // 复选框按钮
            selectArr:[]
        }
    },
    methods:{
        // 点击继续逛逛按钮，跳转至首页
        tabHome(){
            this.$router.push('/')
        },
        // 购物车数量减减
        async subtract(index){
            // 商品id
            let skuId=this.shopList[index].skuId;
            // 商品数量
            let num=--this.$refs.num[index].innerHTML;
            if(this.$refs.num[index].innerHTML<1){
                this.$refs.num[index].innerHTML=1;
                num=1;
            }
            this.xiao(index);
            this.$http.setShopp(skuId,{count:num})
        },
        // 购物车数量加加
        async add(index){
            // 商品id
            let skuId=this.shopList[index].skuId;
            // 商品数量
            let num=++this.$refs.num[index].innerHTML;
            this.xiao(index)
            this.$http.setShopp(skuId,{count:num})
            this.zong();
        },
        // 计算总价
        zong(){
            if(this.checkedAll){
                // 获取所有商品小计
                let arr=this.$refs.xiaoji;
                // 总价变量
                let num=0;
                for(let i=0;i<arr.length;i++){
                    // 总价加上所有小计
                    num+=Number(arr[i].innerHTML)
                }
                // 让总价元素的文本内容等于总价
                this.$refs.zong.innerHTML=Number(num).toFixed(2);
            }else{
                // 全选按扭取消选择总价等于0
                this.$refs.zong.innerHTML=0
            }
            
        },
        // 商品小计
        xiao(index){
            this.$refs.xiaoji[index].innerHTML=Number(this.$refs.num[index].innerHTML*this.$refs.price[index].innerHTML).toFixed(2);
        },
        // 商品列表多选框
        async setSelect(sel,index){
            let skuId=this.shopList[index].skuId;
            this.$http.setShopp(skuId,{selected:sel});
            // 请求购物列表数据
            let shopData=await this.$http.getShopp();
            // 设置购物车列表数据
            this.shopList=shopData.data.result
            // 设置购物车复选框状态
            for(let i=0;i<this.shopList.length;i++){
                this.selectArr[i]=(this.shopList[i].selected)
            }
        },
        // 商品删除
        async remove(index){
            let cartId=this.shopList[index].skuId
            let obj={
                ids:cartId
            }
            await this.$http.deleteCart(obj);
        }
    },
    async created(){
        let number=await this.$http.getShoppNum()
        // 判断购物车商品数量
        if(number.data.result.count>0){// 商品数量大于0显示商品列表
            // 空盒子显示
            this.boxBoolean=false;
            // 商品列表显示
            this.boxBoolean2=true;
            // 请求购物列表数据
            let shopData=await this.$http.getShopp();
            // 设置购物车列表数据
            this.shopList=shopData.data.result
            // 设置购物车复选框状态
            for(let i=0;i<this.shopList.length;i++){
                this.selectArr.push(this.shopList[i].selected)
            }
            // console.log(this.selectArr);
            // 延时设置商品信息
            setTimeout(()=>{
                // 商品信息字数过多以省略号显示
                let len=this.$refs.title
                // console.log(this.$refs.title[1],len);
                for(let i=0;i<len.length;i++){
                    if(len[i].innerHTML.length>16){
                        let str=len[i].innerHTML.slice(0,16)+'...';
                        this.$refs.title[i].innerHTML=str;
                    }
                }
            },500)
        }
    },
    watch:{
        // 监听全选按钮变换总价
        checkedAll:function(){
            this.zong();
            console.log(this)
        }
    },
    components:{
        GuessView
    }
}
</script>

<style lang="scss" scoped>
// 购物车商品列表字体大小
$size:14px;
$pad:10px;
.lh{
    padding:10px;
    line-height: 50px;
    text-align: center;
}
// 购物车页面
.cart{
    // margin-top:72px;
    // 导航面包屑
    .nav {
        margin: 30px;
    }
    // 购物车商品列表
    .cartList{
        width:100%;
        // 商品列表头部信息
        .top{
            width:100%;
            height:71px;
            background:#fff;
            margin-bottom:1px;
            display:flex;
            align-items: center;
            font-size:14px;
            .all{
                width:80px;
                height:50px;
                padding:10px 10px 10px 30px;
                line-height: 50px;
                text-align: center;
            }
            .message{
                width:380px;
                height:50px;
                line-height: 50px;
                text-align: center;
            }
            .u-price{
                width:200px;
                height:50px;
            }
            .num{
                width:160px;
                height:50px;
            }
            .subtotall{
                width:160px;
                height:50px;
            }
            .operation{
                width:120px;
                height:50px;
            }
        }
        // 空购物车布局
        .content{
            width:100%;
            height:554px;
            background:#fff;
            .empty {
                text-align:center;
                width:100%;
                height:234px;
                padding:150px 0;
                .none{
                    padding:20px 0;
                }
                .btn{
                    width:166px;
                    height:46px;
                    background: #27BA9B;
                }
            }
        }
        // 购物车商品列表
        .shopping{
            width:100%;
            background:#fff;
            border-bottom:1px solid #F5F5F5;
            .shop-box{
                width:100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align:center;
                .sel{
                    width:80px;
                    height:100px;
                    line-height:100px;
                    padding:10px 10px 10px 30px;
                }
                .shop{
                    width:380px;
                    height:100px;
                    margin:10px;
                    display: flex;
                    align-items: center;
                    // line-height: 100px;
                    .max{
                        width:100px;
                        height:100px;
                        margin-right:10px;
                    }
                    .txt{
                        font-size:15px;
                        text-align:left;
                        p{
                            width:270px;
                            height:24px;
                            line-height: 24px;
                        }
                    }
                }
                .price{
                    width:200px;
                    height:100px;
                    padding:$pad;
                    line-height: 100px;
                    font-size: $size;
                }
                .num{
                    width:160px;
                    height:100px;
                    padding:$pad;
                    font-size: $size;
                    box-sizing: border-box;
                    padding-top:30px;
                    p{
                        width:118px;
                        height:28px;
                        display:inline-block;
                        border:1px solid #E3E3E3;
                        line-height:28px;
                    }
                    .subtract,.add{
                        width:28px;
                        height:28px;
                        background:#F7F7F7;
                        display: inline-block;
                        cursor: pointer;
                    }
                    .quantity{
                        width:60px;
                        height:28px;
                        background:#fff;
                        border-left:1px solid #E3E3E3;
                        border-right:1px solid #E3E3E3;
                        display: inline-block;
                    }
                }
                .xiao{
                    width:160px;
                    height:100px;
                    padding:$pad;
                    line-height: 100px;
                    font-size: $size;
                    color:#CE4343;
                }
                .remove{
                    width:120px;
                    height:100px;
                    padding:$pad;
                    line-height: 100px;
                    font-size:12px;
                    color:#25B99B;
                    font-size: $size;
                }
            }
        }
    }
    // 购物车操作
    .commodity_operation{
        width:100%;
        height:80px;
        background:#fff;
        margin:21px 0;
        font-size:15px;
        display:flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding:0 30px;
        line-height: 80px;
        .left{
            width:352px;
            height:23px;
            p:nth-child(1){
                margin:0;
            }
            p{
                float:left;
                margin-left:20px;
            }
        }
        .right{
            height:50px;
            .btn{
                margin-left:20px;
                width:166px;
                height:46px;
                padding:1px 6px;
                background:#27BA9B;
            }
        }
    }
}
</style>